import './index.scss';
import {
    Button,
    Modal,
    Form,
    Input,
    DatePicker,
    Select,
    Space,
    Row,
    Col,
    message,
    Table,
} from 'antd';
import { useState } from 'react';
import { useAntdTable } from 'ahooks';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useFormModal } from '@/hooks/useFormModal';
import { qryFlowByAbnormalNo } from '@/config/request/opsSearchManager';
import OpsSettlementPurchaseDetail from './opsSettlementPurchaseDetail';

const OpsSettlementPurchase: React.FC = () => {
    const [form] = Form.useForm();
    const formUseModal = useFormModal();
    const [rowItem, setRowItem] = useState<any>();

    const { tableProps, search } = useAntdTable(
        async () => {
            const { publishDate } = form.getFieldsValue();
            const params = {
                ...form.getFieldsValue(),
                startTime: publishDate?.[0]?.format('YYYY-MM-DD 00:00:00'),
                endTime: publishDate?.[1]?.format('YYYY-MM-DD 23:59:59'),
                // pageNum: 1,
                // pageSize: 1000,
                // supplierType
            };
            delete params.publishDate;
            const res = await qryFlowByAbnormalNo(params);
            return {
                total: res.data.data?.total ?? 0,
                list: res.data.data?.rows ?? [],
            };
        },
        { defaultPageSize: 10, form }
    );

    const columns: ColumnsType<any> = [
        {
            title: '异常采购单号',
            dataIndex: 'refundSupplierFlowNo',
            key: 'refundSupplierFlowNo',
            width: 5,
        },
        {
            title: '类型',
            key: 'type',
            dataIndex: 'type',
            width: 5,
        },
        {
            title: '收款账号',
            dataIndex: 'receivePaymentAccount',
            key: 'receivePaymentAccount',
            width: 5,
        },

        {
            title: '收款金额',
            dataIndex: 'refundArriveAmount',
            key: 'refundArriveAmount',
            width: 5,
        },
        {
            title: '收款时间',
            dataIndex: 'refundArriveTime',
            key: 'refundArriveTime',
            width: 5,
        },

        {
            title: '订单编号',
            dataIndex: 'platformOrderNo',
            key: 'platformOrderNo',
            width: 8,
        },
        {
            title: '采购单号',
            dataIndex: 'purchaseOrderNo',
            key: 'purchaseOrderNo',
            width: 8,
        },
        {
            title: '交易流水时间',
            dataIndex: 'tradeTime',
            key: 'tradeTime',
            width: 8,
        },
        {
            title: '交易金额',
            dataIndex: 'inAmount',
            key: 'inAmount',
            width: 8,
        },
        {
            title: '异常采购单状态',
            dataIndex: 'status',
            key: 'status',
            width: 8,
        },
        {
            title: '对账状态',
            dataIndex: 'accountCheckStatus',
            key: 'accountCheckStatus',
            width: 8,
        },
        {
            title: '对账失败原因',
            dataIndex: 'reconciliationStatusReason',
            key: 'reconciliationStatusReason',
            width: 8,
        },
        {
            title: '操作',
            fixed: 'right',
            key: 'action',
            width: 10,
            render: (_: any, render: any) => {
                return (
                    <Space size="middle">
                        <Button
                            type="primary"
                            onClick={() => {
                                formUseModal.modal.open();
                                setRowItem(render);
                            }}
                        >
                            详情
                        </Button>
                    </Space>
                );
            },
        },
    ];

    return (
        <div className="bg-white p-2.5">
            <Form form={form} name="supplierList_search">
                <Row>
                    <Col span={4}>
                        <Form.Item
                            label="异常采购单号"
                            name="abnormalPurchaseNO"
                        >
                            <Input placeholder="请输入" allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item label="商家订单号" name="backOrderNo">
                            <Input placeholder="请输入" allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={24} style={{ textAlign: 'right' }}>
                        <Form.Item>
                            <Space size="small">
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    onClick={search.submit}
                                >
                                    搜索
                                </Button>
                                <Button type="primary" onClick={search.reset}>
                                    重置
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>

                <Table
                    {...tableProps}
                    bordered
                    columns={columns}
                    pagination={false}
                    rowKey="bugId"
                    locale={{ emptyText: '暂无数据' }}
                    scroll={{ x: 'calc(0vw + 10px)' }}
                />
            </Form>
            <Modal
                width={1200}
                destroyOnClose
                open={formUseModal.isOpen}
                onOk={() => {
                    formUseModal.modal.close();
                }}
                onCancel={() => {
                    formUseModal.modal.close();
                }}
                title={'详情数据'}
                className="formMemberModal"
                okText="确定"
                cancelText="取消"
                maskClosable={false}
            >
                <OpsSettlementPurchaseDetail
                    formModal={formUseModal}
                    rowItem={rowItem}
                />
            </Modal>
        </div>
    );
};

export default OpsSettlementPurchase;
